<template>
	<w-layout showNavbar navTitle="合成记录" :navTitleColor="publicStyles['--color-t1']" background="url('/static/image/bk.png') no-repeat"
		navBackgroundColor="transparent" :scrollTop="page.scrollTop" :navScrollColor="publicStyles['--color-bk']">
		<template #default>
			<view class="container">
				<view style="min-height: 334rpx;position: relative;" class="public-card-6 fc px-5 mt-40" v-for="(item,index) in state.list" :key="index">
					<view class="public-btn-11 px-40 py-30 fr-ac-jsb u-border-bottom" style="border-color: var(--gray-line) !important;">
						<view class="ellipsis-1 flex-1 mr-40">
							合成万代 {{item.product_title}}
						</view>
						<view class="fr-ac ">
							<view class="op-30 fs-24">
								{{item.addtime}}
							</view>
						</view>
					</view>
					<view class="mt-50 px-40 fr-ac" style="border-color: var(--gray-line) !important;">
						<view class="public-img-4 px-10 py-10">
							<cut-corner :arrow="2" clipSize="30rpx">
								<image style="width: 112rpx;height: 112rpx;" :src="item.product_imgurl" mode=""></image>
							</cut-corner>
							<!-- <view class="ellipsis-1 fs-22 op-70 mt-10">
								{{item.product_title}}
							</view> -->
						</view>
						
						
						<view class="flex-1 fc-ac">
							<image style="width: 30rpx;height: 30rpx;" src="/static/icon/public/left-2.png" mode=""></image>
						</view>
						<scroll-view class="w-65" scroll-x="true" >
							<view class="fr-ac">
								<view class="mr-30 px-10 py-10" v-for="(item2,index2) in item.list" :key="index2">
									<cut-corner :arrow="2" clipSize="30rpx">
										<image style="width: 112rpx;height: 112rpx;" :src="item2.goodslist_imgurl" mode=""></image>
									</cut-corner>
									<!-- <view class="ellipsis-1 fs-22 op-70 mt-10">
										{{item2.goodslist_title}}
									</view> -->
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<no-more :show="state.list.length == 0"></no-more>
			</view>
		</template>
	</w-layout>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		computed,
		nextTick
	} from 'vue'
	import {
		storeToRefs
	} from 'pinia'
	import {
		onLoad, onPageScroll,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		useAppStore
	} from '@/store/app'
	import {
		useColorStore
	} from '@/store/color'
	import {
		wish_record
	} from '@/utils/request/api';
	import {
		useUserStore
	} from '@/store/user'
	const userStore = useUserStore()
	const appStore = useAppStore()
	const colorStore = useColorStore()
	const {
		publicStyles
	} = storeToRefs(colorStore)
	onLoad(async(options) => {
		get_wish_record()
	})
	onMounted(() => {
		appStore.loadingHandler(false)
	})
	onPageScroll((e)=>{
		page.scrollTop = e.scrollTop
	})
	onReachBottom(()=>{
		if(state.last_limit == state.limit){
			state.page++
			get_wish_record()
		}
	})
	
	const page = reactive({
		scrollTop:0
	})
	
	const state = reactive({
		list:[],
		page:1,
		limit:10,
		last_limit:10,
		
		keyword:'',
	})
	function initData(){
		state.list = []
		state.page = 1
		state.last_limit = 10
	}
	
	
	const popup = reactive({
		showRule:false,
		showConflate:false,
	})
	
	function replaceBox(){
		uni.navigateTo({
			url:`/pages/yifan_shang/replace`
		})
	}
	
	
	const swiper = reactive({
		current:0,
		list:[
			{
				id:1,
				url:'/static/logo.png'
			},
			{
				id:2,
				url:'/static/logo.png'
			},
			{
				id:3,
				url:'/static/logo.png'
			}
		]
	})
	function swiperChange(e){
		console.log(e,'eeeeeeeee')
		swiper.current = e.detail.current
	}
	
	
	const type = reactive({
		current:0,
		show:false,
		list:[
			{
				name:'全部',
				value:'',
			},
			{
				name:'SSR',
				value:'',
			},
			{
				name:'SR',
				value:'',
			},
			{
				name:'R',
				value:'',
			}
		]
	})
	function typeChange(item,index){
		console.log(item)
		type.current = index
		type.show = false
	}
	
	
	async function get_wish_record(){
		const res = await wish_record({
			page: state.page
		})
		state.last_limit = res.record.list.length
		state.list = state.list.concat(res.record.list)
	}
	
</script>

<style lang="scss">
	.shadow {
		box-shadow: 2rpx 2rpx 12rpx var(--shadow);
	}
	.color{
		color: var(--color);
	}

	.container {
		width: 100%;
		min-height: 100%;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		padding: 0 30rpx;
		
	}
	
	.swiper-item{
		width: fit-content;
		height: fit-content;
	}
	.swiper-item-active{
		image{
			width: 250rpx;height: 250rpx;
		}
	}
	.swiper-item-default{
		opacity: 0.7;
		image{
			width: 210rpx;height: 210rpx;
		}
	}
	
	::v-deep .u-number-box__minus,.u-number-box__plus{
		background-color: transparent !important;
	}
	
	.sticky-left{
		position: sticky;
		left: 0;
		z-index: 99;
	}
</style>